<template>
    <div class="search-box">
        <div class="flex">
            <div>
                <el-icon><Search /></el-icon>
                <span>筛选搜索</span>
            </div>
            <div>
                <el-button>重置</el-button>
                <el-button @click="submitFn" type="primary">查询搜索</el-button>
            </div>
        </div>
        <div style="padding-top: 20px">
            <el-form @submit.prevent="submitFn" ref="searchFormRef" :model="queryParams">
                <el-form-item prop="keyword" label="账号/姓名:" label-width="120px">
                    <el-input v-model="queryParams.keyword"></el-input>
                </el-form-item>
            </el-form>
        </div>
    </div>
    <el-table :data="list" border cell-class-name="center">
        <el-table-column class-name="center" prop="id" label="编号" width="80px" />
        <el-table-column class-name="center" prop="name" label="角色名称" />
        <el-table-column class-name="center" prop="description" label="描述" />
        <el-table-column class-name="center" prop="adminCount" label="用户数" />
        <el-table-column class-name="center" prop="createTime" label="添加时间">
            <template #default="scope">
                <span>{{ fomatDate(scope.row.createTime) }}</span>
            </template>
        </el-table-column>
        <el-table-column class-name="center" prop="status" label="是否启用">
            <template #default="scope">
                <el-switch
                    v-model="scope.row.status"
                    :active-value="1"
                    :deactive-value="0"
                ></el-switch>
            </template>
        </el-table-column>
        <el-table-column class-name="center" label="操作">
            <template #default="scope">
                <el-button
                    link
                    type="primary"
                    @click="router.push('/ums/allocResource?id=' + scope.row.id)"
                >
                    分配资源
                </el-button>
                <el-button link type="primary" @click="comfn(scope.row.id)">编辑</el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-dialog v-model="centerDialogVisible" title="分配角色" width="30%" align-center>
        <el-form :model="form" label-width="120px">
            <el-form-item label="角色名称：">
                <el-input v-model="form.name" />
            </el-form-item>
            <el-form-item label="描述">
                <el-input v-model="form.description" type="textarea" />
            </el-form-item>
            <el-form-item label="是否启用">
                <el-radio-group v-model="form.status">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="0">否</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>

        <template #footer>
            <span class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="send">提交</el-button>
            </span>
        </template>
    </el-dialog>

    <ElConfigProvider :locale="zhCn">
        <el-pagination
            v-model:currentPage="queryParams.pageNum"
            v-model:page-size="queryParams.pageSize"
            background
            layout="total, sizes, prev, pager, next ,jumper"
            :total="total"
            @size-change="pageSizeChagne"
            @current-change="currentChagne"
            :page-sizes="[10, 20, 50, 100]"
        />
    </ElConfigProvider>
</template>
<script setup lang="ts">
import { user } from '@/api';
import { reactive, ref, toRefs } from 'vue';
import { fomatDate } from '@/utils';
import zhCn from 'element-plus/lib/locale/lang/zh-cn';
import { ElConfigProvider } from 'element-plus';
import { useRouter } from 'vue-router';
import { Search } from '@element-plus/icons-vue';
import { number } from 'prop-types';

const router = useRouter();
const centerDialogVisible = ref(false);
const state = reactive<{
    list: IRoleModel[];
    total: number;
}>({
    list: [],
    total: 0,
});
//编辑数据
const timer = new Date();
const form: any = reactive({
    name: '',
    description: '',
    adminCount: 0,
    createTime: timer,
    id: '',
    sort: '',
    status: '',
});

const { list, total } = toRefs(state);
const queryParams = reactive<user>({
    keyword: '',
    pageNum: 1,
    pageSize: 10,
});
//进入页面渲染
const queryRoleList = () => {
    user.queryRoleListApi(queryParams).then(res => {
        if (res.code === 200) {
            state.list = res.data.list;
            state.total = res.data.total;
        }
    });
};
queryRoleList();
const submitFn = () => {
    queryRoleList();
};
const pageSizeChagne = () => {
    queryRoleList();
};
const currentChagne = () => {
    queryRoleList();
};

//点击编辑
const comfn = (ind: number) => {
    centerDialogVisible.value = true;
    let count = 0;
    console.log(list.value);

    //计算出索引值
    for (let i = 0; i < list.value.length; i++) {
        if (list.value[i].id === ind) {
            console.log('索引', i);
            count = i;
        }
    }
    form.name = list.value[count].name;
    form.description = list.value[count].description;
    form.status = list.value[count].status;
    form.id = list.value[count].id;
    form.sort = list.value[count].sort;
};
//提交
const send = () => {
    user.RoleListEditingApi(form).then(res => {
        if (res.code === 200) {
            console.log(res);
            queryRoleList();
        }
    });

    centerDialogVisible.value = false;
};
</script>
<style lang="less" scoped>
:deep(.center) {
    text-align: center;
}

.search-box {
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 10px;
    .flex {
        display: flex;
        justify-content: space-between;
    }
}
.dialog-footer button:first-child {
    margin-right: 10px;
}
</style>
